<template>
  <div class="container">
     <el-card class="box-card">
      <!-- 剧场信息 -->
      <div class="theaterinfo">
        <div class="title">
       {{theaterInfo.theaterName}}基本信息
       </div>
        <a class="theaterurl" :href="theaterInfo.theaterUrl" target="_blank">官网地址</a>
        <span class="theatertel">联系电话: {{theaterInfo.theaterTel}}</span>
      </div>
      <el-divider>剧场演出厅信息</el-divider>
      <el-tabs v-model="activeName" type="card" lazy="true" ref="seatmap" :before-leave="beforeLeave" @tab-click='tabClick'>
        <el-tab-pane
          v-for="(item, index) in theaterInfo.theatreHall"
          :key="index"
          :name="item.hallId"
          :label="item.hallName"
        >
        <!-- 演出厅信息 -->
        <div class="hallinfo">
            <div class="title">
              演出厅名：{{item.hallName}}
            </div>
            <div class="hallsize">
              占格{{item.hallWidth}}*{{item.hallHeight}}
            </div>
            <div class="hallseats">
              共有{{item.hallSeats}}个座位
            </div>
          <div class="deletebotton">
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="deletehall()">删除</el-button>
          </div>
          <div class="editbotton">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="editSeatMap()" v-if="!isEditSeatMap">编辑</el-button>
            <el-button type="success" size="mini" icon="el-icon-check" @click="editSeatMap()" v-if="isEditSeatMap">完成</el-button>
          </div>
        </div>
        <seatmap
          :item="item"
          :activeName="activeName"
          :seatMapWidth="seatMapWidth"
          :seatSize="seatSize"
          :isEditSeatMap="isEditSeatMap"
          v-loading="seatMapMask"
          >
      </seatmap>
        </el-tab-pane>
        <el-tab-pane
          key="add"
          name="add"
        >
        <span slot="label" style="padding: 8px;font-size:20px;font-weight:bold;">+</span>
        </el-tab-pane>
      </el-tabs>
      <el-divider>近期演出剧目</el-divider>
      <div class="shows" v-loading="showLoadingMask">
         <el-table
           :data="showLimit"
           stripe
           >
           <el-table-column prop="showName" label="剧目名称"> </el-table-column>
           <el-table-column prop="date" label="演出时间" > </el-table-column>
           <el-table-column prop="price" label="价格区间"> </el-table-column>
           <el-table-column prop="type" label="剧目类型" > </el-table-column>
           <el-table-column prop="hall" label="演出厅" > </el-table-column>
           <el-table-column label="操作" width="200">
             <template slot-scope="scope">
               <el-button type="primary" @click='editShow(scope.row.theater, scope.row.id)'>编辑</el-button>
             <el-button type="danger" @click='deletShow(scope.row.theater, scope.row.id)'>删除</el-button>
             </template>
           </el-table-column>
         </el-table>
      </div>
     </el-card>
  <!-- 编辑剧目对话框 -->
     <editShowDialog
     :editShowVisible="editShowVisible"
     :showHall="showHall"
     :showinfo='showinfo'
     @closeEditShowDialog="closeEditShowDialog"
     @changeShowLimit="changeShowLimit"></editShowDialog>
  <!-- 添加演出厅对话框 -->
    <addHallDialog
    :addHallVisible="addHallVisible"
    :theaterInfo="theaterInfo"
    @closeAddHallDialog="closeAddHallDialog"
    @addHallComplete="addHallComplete">
    </addHallDialog>
  </div>
</template>

<script>
// 导入子组件
import seatmap from './components/seatmap'
import editShowDialog from './components/editShowDialog'
import addHallDialog from './components/addHallDialog'

import { mapActions } from 'vuex'

// 导入网络请求
import { postseatmap, gettheaterinfo, geteditshow, getdeletShow, postdeletehall } from '../../network/theaterManage'

export default {
  name: 'theaterManage',
  data () {
    return {
      // 演出场馆
      showHall: [],
      // 当前剧院名称
      theaterPath: '',
      // 当前剧院全部信息
      theaterInfo: {},
      // 当前显示的演出厅
      activeName: '0',
      // 全部剧目的数据
      showsAll: [],
      // 仅显示当前演出厅的10条的数据
      showLimit: [],
      // 编辑剧目对话框显示
      editShowVisible: false,
      // 当前需要编辑剧目的数据
      showinfo: {},
      // 当前座位图是否可编辑标识符
      isEditSeatMap: false,
      // 当前座位图的宽度
      seatMapWidth: 0,
      // 每个座位图标的大小
      seatSize: '',
      // 添加演出厅对话框显示标识符
      addHallVisible: false,
      // 座位图加载的mask
      seatMapMask: false,
      // 剧目加载
      showLoadingMask: false
    }
  },
  components: { seatmap, editShowDialog, addHallDialog },
  watch: {
    // 监听是否可编辑按钮的变化，当从true -> false的时候就要重新传递数据去后台
    isEditSeatMap (val, oval) {
      if (val === false) {
        // console.log(this.theaterInfo.theatreHall[this.activeName])
        // this.$axios.post('http://localhost:3033/seatmap', {
        //   'path': this.theaterInfo.path,
        //   'activename': this.activeName,
        //   'seatmap': this.theaterInfo.theatreHall[this.activeName]
        // })
        postseatmap(this.theaterInfo.path, this.activeName, this.theaterInfo.theatreHall[this.activeName]).then(res => {
          // console.log(res)
          if (res.status === 200) {
            this.theaterInfo = res.data.theaterData
          }
        })
      }
    }
  },
  computed: {
    isSeat () {
      return (b) => {
        return b
      }
    }
  },
  methods: {
    ...mapActions(['getpath']),
    // 冒泡排序
    bubbleSort (arr) {
      let len = arr.length
      for (var i = 0; i < len; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
          if (arr[j].date > arr[j + 1].date) { // 相邻元素两两对比
            let temp = arr[j + 1] // 元素交换
            arr[j + 1] = arr[j]
            arr[j] = temp
          }
        }
      }
    },
    // tab栏的切换拦截
    beforeLeave (activeName, oldName) {
      // 重点，如果name是add，则什么都不触发
      if (activeName === 'add') {
        // 显示对话框
        this.addHallVisible = true
        return false
      } else {
        this.showLoadingMask = true
        this.activeName = activeName
        this.isEditSeatMap = false
        this.getSeatSize()
      }
    },
    // 获取数据参数
    getTheaterInfo (currentPath) {
      gettheaterinfo(currentPath, this.activeName).then(res => {
        // console.log(res.data)
        this.showHall = []
        this.theaterInfo = res.data.theaterData
        this.showsAll = res.data.showData
        // 提取演出场馆信息
        this.theaterInfo.theatreHall.forEach((r) => {
          this.showHall.push(r.hallName)
        })
        // 对剧目列表进行排序
        this.$nextTick(() => {
          this.getSeatSize()
          this.getlimitshow()
          this.seatMapMask = false
        })
      })
    },
    // 获取当前演出厅前10场演出
    getlimitshow () {
      this.showLimit = this.showsAll.slice(0, 10)
      this.showLoadingMask = false
    },
    // 当剧目修改之后，显示的10场演出的剧目信息也要更新
    changeShowLimit () {
      // 重新获取数据
      this.getTheaterInfo(this.theaterPath)
      // 重新获取前10场演出
      this.getlimitshow()
      // 打开剧目加载mask
      this.showLoadingMask = true
      // 关闭修改对话框
      this.editShowVisible = false
    },
    // 修改剧目数据
    editShow (ctheater, cid) {
      // console.log(ctheater, cid)
      geteditshow(ctheater, cid).then(res => {
        if (res.status !== 200) {
          this.$message.error('数据获取失败')
        }
        this.showinfo = res.data.currentshow
        this.editShowVisible = true
      })
    },
    // 删除剧目
    deletShow (ctheater, cid) {
      getdeletShow(ctheater, cid, this.activeName).then(res => {
        // console.log(res)
        // 传输过来的数据重新给theaterInfo来刷新展示
        // console.log(res)
        this.showsAll = res.data.currentshow
        // 对剧目列表进行排序
        this.bubbleSort(this.showsAll)
        // 仅显示10个的时候的数据
        this.showLimit = this.showsAll.slice(0, 10)
      })
    },
    // 通过当前宽度来计算每个座位能在这个盒子里面占的位置
    getSeatSize () {
      this.seatSize = this.seatMapWidth / this.theaterInfo.theatreHall[parseInt(this.activeName)].hallWidth + 'px'
    },
    // 编辑按钮点开
    editSeatMap () {
      this.isEditSeatMap = !this.isEditSeatMap
    },
    // 删除演出厅事件
    deletehall () {
      postdeletehall(this.theaterInfo.path, this.activeName).then(res => {
        // 将tab栏移到第一个
        // console.log(res)
        this.activeName = '0'
        this.theaterInfo.theatreHall = res.data.theaterData.theatreHall
        this.$nextTick(() => {
          // 要根据当前的数据重新获取座位图表宽度
          this.getSeatSize()
        })
        // console.log(this.theaterInfo)
      })
    },
    // 关闭编辑对话框的操作
    closeEditShowDialog () {
      this.editShowVisible = false
    },
    // 关闭添加剧目对话框的操作
    closeAddHallDialog () {
      this.addHallVisible = false
    },
    // 每次点击tab需要重新计算当前的list
    tabClick () {
      this.getTheaterInfo(this.theaterPath)
    },
    // 添加剧院对话框事件完成
    addHallComplete (data) {
      // 剧场信息更新
      this.theaterInfo = data
      // 演出信息清零
      this.showsAll = []
      this.showLimit = []
      // 设置新的标签编号
      this.activeName = `${this.theaterInfo.theatreHall.length - 1}`
      // 关闭对话框
      this.addHallVisible = false
    }
  },
  created () {
    // 这里考虑下刷新的情况，之前path保存在sessionstore里面，如果刷新后数据不存在就在这个里面拿
    if (this.theaterPath === '') {
      this.theaterPath = window.sessionStorage.getItem('path')
    }
    // 这里是第一次切入进这个组件的时候要打开mask
    this.showLoadingMask = true
    this.seatMapMask = true
    this.Bus.$on('getTheaterName', path => {
      // 展开全局的mask
      this.showLoadingMask = true
      this.seatMapMask = true
      this.activeName = '0'
      this.theaterPath = path
      this.getTheaterInfo(this.theaterPath)
    })
  },
  mounted () {
    this.getTheaterInfo(window.sessionStorage.getItem('path'))
    // 获取到seatMap的当前宽度，用于计算宽度
    this.seatMapWidth = this.$refs.seatmap.$el.offsetWidth - 22
  }
}
</script>

<style lang='stylus' scoped>
/deep/ .el-card__body
   padding-right 0
.theaterinfo
  .title
    font-size 16px
    margin-bottom 6px
  .theaterurl
    display block
    font-size 12px
    color rgb(67,67,69)
    margin-bottom 4px
  .theatertel
    font-size 12px
.hallinfo
  position relative
  padding 8px
  .title
    font-size 12px
    margin-bottom 4px
  .hallsize
    font-size 12px
    margin-bottom 4px
  .deletebotton
    position absolute
    left 208px
    bottom 8px
    margin 0 8px
  .editbotton
    position absolute
    bottom 8px
    left 144px
    margin 0 8px
.seatmap
  .seat
    box-sizing border-box
    margin 2px
    background-color pink
    display inline-block
  .notseat
    opacity 0
</style>
